<template>
    <div class="app_container">
        
        <!--中間放置header-->
        <div class="header">
            <van-nav-bar
            title="试验品"
            :left-text="left_text"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
            />
        </div>




        <!--中间放router-view-->
       <transition>
           <keep-alive include="shopcar,photo_list">
               <router-view></router-view>
           </keep-alive>
            

       </transition>
        <!--底部放tabar-->

        <nav class="mui-bar mui-bar-tab">
            
			<router-link class="mui-tab-item" to="/home">
				<van-icon name="home-o" size="25px" class="van_icon"/>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/member">
				<van-icon name="user-circle-o" size="25px" class="van_icon"/>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar">
				<van-icon name="shopping-cart-o" size="25px" class="van_icon" :info="$store.getters.show_num" style="margin-right:0px;"/>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/search">
				<van-icon name="search" size="25px" class="van_icon"/>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>
    </div>
</template>
<script>
    
    import { Toast } from 'mint-ui';
    export default {
        name: "app",
        data(){
            return {
                left_text:'返回'
            }
        },
        methods:{
            onClickLeft(){
                //go back
                this.$router.go(-1);
            },
            onClickRight(){
                onClickRight
            }
        },
        watch:{
            '$route.path':function(newvalue){
                 if(newvalue==='/home')
                     this.left_text="";
                else{
                    this.left_text="返回";
                }
            }
        },
        created(){
            if(this.$route.path==='/home'){
                this.left_text="";
            }
        }
    }
</script>
<style scoped lang='scss'>

.mint-header{
    z-index: 99;
}
.app_container{

    padding-bottom: 57px;
    overflow-x: hidden;
    .header{
        position: fixed;
        top: 0%;
        width: 100%;
        z-index: 99;;
    }
    .van_icon{
        margin: 5px;
        display: block;
    }
    .mui-tab-label{
        font-size: 15px;
        margin: 0px;
    }
    .van-info{
        top:-3px;
        right: 20px;
        height: 20px;
        width: 20px;
        line-height: 20px;
        font-size: 15px;
        font-weight: 500;
    }
}

.v-enter{
    opacity: 0;
    transform:translateX(100%);
}
.v-leave-to{
    opacity: 0;
    transform:translateX(-100%);
    position:absolute;
}

.v-enter-active,
.v-leave-active{
    transition: all 0.5s ease;
}
</style>